<template>
  <div id="three-nape-data"></div>
</template>

<script>
import echarts from '../../lib/echarts'

export default {
  name: "DataAnalyzeThree",
  components: {},
  data() {
    return {
      title: ['情绪状态', '精力状态', '学习状态']
    }
  },
  computed: {},
  watch: {},
  mounted() {
    this.initial();
  },
  methods: {
    initial() {
      var myChart = echarts.init(document.getElementById('three-nape-data'));
      myChart.setOption({
        backgroundColor: '#fff',
        // 设置图例颜色
        color: ['#c346c2', '#4c83ff', '#49c628'],
        tooltip: {
          trigger: 'axis',
          axisPointer: {
            type: 'line',
            lineStyle: {
              type: "dotted",
              opacity: 0
            }
          }
        },
        grid: {
          left: "8%",
          right: "2%",
          top: "16%",
          bottom: "2%",
          containLabel: true
        },
        // 图例说明文字
        legend: {
          left: '36%',
          textStyle: {
            color: '#8C8C8C'
          },
          data: this.title,
        },
        xAxis: {
          type: 'category',
          // 线条是否从0开始
          boundaryGap: false,
          axisLabel: {
            show: true,
            textStyle: {
              color: "#2479ff",
              lineHeight: 26
            }
          },
          axisLine: {
            show: true,
            lineStyle: {
              color: '#2479ff',
              width: 1,
              type: "solid"
            }
          },
          axisTick: {
            show: true,
            length: 3,
            lineStyle: {
              width: 1,
              type: "solid"
            }
          },
          data: ['政治', '物理', '化学', '生物', '英语', '历史', '数学']
        },
        yAxis: {
          type: 'value',
          // 分隔线样式设置
          splitLine: {
            show: true,
            lineStyle: {
              color: '#e0e0e0',
              type: "dashed"
            }
          },
          axisLine: {
            show: false,
            lineStyle: {
              color: '#fff',
              width: 1,
              type: "solid"
            }
          },
          axisLabel: {
            show: true,
            textStyle: {
              color: "#2479ff"
            }
          }
        },
        series: [{
          name: "情绪状态",
          type: 'line',
          smooth: true,
          // 设置拆线渐变色
          areaStyle: {
            color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{
              offset: 0,
              color: 'rgba(195, 74, 194, 0.3)'
            }, {
              offset: 1,
              color: 'rgba(195, 74, 194, 0)'
            }])
          },
          // 设置折线线条颜色
          itemStyle: {
            normal: {
              lineStyle: {
                color: '#c346c2'
              }
            }
          },
          data: [820, 932, 901, 934, 1290, 1330, 1320],
        }, {
          name: "精力状态",
          type: 'line',
          smooth: true,
          areaStyle: {
            color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{
              offset: 0,
              color: 'rgba(76, 130, 255, 0.3)'
            }, {
              offset: 1,
              color: 'rgba(76, 130, 255, 0)'
            }])
          },
          itemStyle: {
            normal: {
              lineStyle: {
                color: '#4c83ff'
              }
            }
          },
          data: [350, 232, 301, 554, 670, 480, 510],
        }, {
          name: "学习状态",
          type: 'line',
          smooth: true,
          areaStyle: {
            color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{
              offset: 0,
              color: 'rgba(73,198,40, 0.3)'
            }, {
              offset: 1,
              color: 'rgba(73,198,40, 0)'
            }])
          },
          itemStyle: {
            normal: {
              lineStyle: {
                color: '#49c628'
              }
            }
          },
          data: [220, 182, 191, 234, 290, 330, 310],
        }]
      })
    }
  }
}
</script>

<style scoped>
#three-nape-data {
  width: 100%;
  height: 100%;
}
</style>
